<template>
  <div>
    <el-dialog
      title="告警记录"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="closeDialog"
      :close-on-click-modal="false"
      append-to-body
    >
      <div class="div_box">
        <div class="header">
          <div>
            <el-select
              v-model="search_val.alarmType"
              placeholder="告警类型"
              size="small"
              clearable
              style="width: 190px; margin-left: 15px"
              @change="AlarmList"
            >
              <el-option
                v-for="dict in dict.type.device_alarm_type"
                :key="dict.id"
                :label="dict.raw.dickLabel"
                :value="dict.raw.dickValue"
              />
            </el-select>
            <el-select
              v-model="search_val.status"
              placeholder="处理状态"
              size="small"
              clearable
              style="width: 190px; margin-left: 15px"
              @change="AlarmList"
            >
              <el-option
                v-for="(item, i) in statusList"
                :key="i"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="content">
          <el-table
            :data="tableData"
            class="table"
            height="370"
            ref="refTable"
            row-key="id"
            :header-cell-style="headerStyle"
          >
            <el-table-column
              align="center"
              label="序号"
              type="index"
              width="80"
              height="30"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="alarmType"
              label="告警类型"
              min-width="120"
              show-overflow-tooltip
            >
              <template slot-scope="{ row }">
                <dict-tag
                  :options="dict.type.device_alarm_type"
                  :value="row.alarmType"
                />
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="status"
              label="处理状态"
              min-width="80"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <el-tag v-if="scope.row.status == 1" type="danger"
                  >未处理</el-tag
                >
                <el-tag v-if="scope.row.status == 2" type="warning"
                  >处理中</el-tag
                >
                <el-tag v-else-if="scope.row.status == 3" type="success"
                  >已处理</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="createTime"
              label="告警时间"
              min-width="120"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="handlingTime"
              label="处理时间"
              min-width="120"
              show-overflow-tooltip
            >
            </el-table-column>

            <el-table-column align="center" label="操作" width="100">
              <template slot-scope="{ row }">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="处理"
                  placement="bottom"
                  v-if="row.status != 3"
                >
                  <i
                    @click="onHandle(row)"
                    class="iconfont tixianchuli tableBtnIcon"
                  ></i>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>

          <pagination
            :total="total"
            :page.sync="page"
            :limit.sync="limit"
            @pagination="AlarmList"
            class="pagination"
          />
        </div>

        <alarmHandling
          ref="refalarmHandling"
          :alarmid="alarmid"
        ></alarmHandling>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { reqAlarmList } from "@/api/api";
import tableStyleMixin from "@mixin/table-style";
import Pagination from "@components/Pagination.vue";
import { mapState } from "vuex";
import alarmHandling from "@/components/DeviceInfo/components/alarmHandling.vue";
export default {
  dicts: ["device_alarm_type"],
  props: {
    deviceInfo: {
      type: Object,
      default: () => {},
    },
  },
  components: {
    Pagination,
    alarmHandling,
  },
  mixins: [tableStyleMixin],

  data() {
    return {
      dialogVisible: false,
      tableData: [],
      search_val: {
        status: "",
        alarmType: "",
      },
      timeArr: [],
      page: 1,
      limit: 10,
      total: 0,
      statusList: [
        {
          id: "1",
          name: "未处理",
        },
        {
          id: "2",
          name: "处理中",
        },
        {
          id: "3",
          name: "已处理",
        },
      ],
      alarmid: "",
    };
  },
  computed: { ...mapState(["user"]) },
  watch: {
    dialogVisible(e) {
      if (e) {
        this.$nextTick(async () => {
          this.AlarmList();
        });
      }
    },
  },
  mounted() {},
  methods: {
    onHandle(row) {
      this.alarmid = row.id;
      this.$refs.refalarmHandling.dialogVisible = true;
    },
    // 获取告警列表
    async AlarmList() {
      let res = await reqAlarmList(this.page, this.limit, {
        userId: this.user.userId,
        tenantId: this.user.tenantId,
        roleName: this.user.roleName,
        imei: this.deviceInfo.imei,
        status: this.search_val.status,
        alarmType: this.search_val.alarmType,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.tableData = res.data.rows;
      this.total = res.data.total || 0;
    },
    // 点击关闭弹框
    closeDialog() {
      this.tableData = [];
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../../../views/common.less");
.titles {
  position: relative;
  font-size: 14px;
  border-bottom: 2px solid @primaryBorderColor;
  padding-bottom: 8px;
  margin: 0 3px 15px;
  display: flex;
  color: @primaryThemeTxtColor2;
  .ant-col {
    width: 160px;
    .red-star {
      color: #f56c6c;
    }
  }
}
.list {
  position: relative;
  display: flex;
  align-items: center;
  .icon {
    font-size: 20px;
    // color: #d55b67;
    color: #7367f0;
    cursor: pointer;
    padding-top: 5px;
    margin-top: 10px;
  }
  .el-icon-circle-plus-outline {
    font-size: 20px;
    margin-left: 8px;
  }
}
</style>
